<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <include file="public@head" />

    <style>
        .sub_comment_list .comment{
            padding: 10px 0 8px;
            line-height: 20px;
            color: #666;
        }
        .auth_comment .comment,.auth_comment .sub_tool_group{
            padding-left: 44px;
        }

        .sub_tool_group{
            margin-bottom: 14px;
        }

        .sub_tool_group .reply_btn{
            color: #669966;
            cursor: pointer;
        }

        .sub_comment_list{
            border-left: 1px solid #e8e8e8;
            margin-left: 44px;
            padding-left: 16px;
        }

        .sub_comment .name{
            color: #80aa9d;
            margin-right: 14px;
        }

        .detail_title{
            position: relative;
        }
        .back_btn{
            position: absolute;
            left: 0;
            padding-left: 44px;
            background: url("__TMPL__public/assets/img/icon_back.png") no-repeat 12px center;
            color: #999;
        }
        .back_btn:hover{
            color: #333;
            /*color: #5cdb96;*/
        }

        .new_comment{
            width: 638px;
            display: block;
            margin: 0 auto;
        }
        .user_input_wrap .user_input{
            outline: none;
            resize:none;
            /*border-style: none;*/
            box-shadow: none;
            text-decoration: none;
            /*border-width: 0px;*/
            word-wrap: break-word;
            /*line-height: 18px;*/
            padding: 12px 6px 0 10px;
            /*width: 580px;*/
            height: 44px;
            line-height: 18px;
            border: 1px solid #ccc;
            background: #f9f9f9;
            border-radius: 4px;
            overflow: auto;
            display: block;
            box-sizing: border-box;
            width: 100%;

        }

        .new_comment span.cancel_btn,.main_comment span.cancel_btn{
            color: #999;
            font-size: 16px;
            margin-top: 26px;
            cursor: pointer;

        }
        .new_comment span.send_btn,.main_comment span.send_btn{
            width: 68px;
            height: 40px;
            line-height: 40px;
            color: #fff;
            text-align: center;
            background: #04dd98;
            margin: 14px 0 0 30px;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;

        }

    </style>

</head>
<body>
<include file="public@starnav" />

<div class="center cirWrapper clearfix">
    <include file="public@starnavleft" />
    <div class="an_right_wra secret_list fr">
        <h3>私信回复</h3>
        <ul class="sc_list_wra">
           <!-- <li class="sc_list">
                <a href="##">
                    <div class="fl star_img_wra">
                        <img src="__TMPL__public/assets/img/user_img.png" alt="">
                        <span class="active"></span>
                    </div>
                    <div class="fl item_left">
                        <h4>刘涛</h4>
                        <p>明天下午两点两点两点两点两点</p>
                    </div>
                    <span class="fr sc_time">刚刚</span>
                </a>
            </li>-->
        </ul>
    </div>
    <div class="an_right_wra secret_detail displayNone fr">
        <h3 class="detail_title"><a class="back_btn fl" href="javascript:void(0)">私信回复列表</a> <span class="name_send">刘涛</span></h3>
        <div class="sc_chat_wra">
            <div class="sc_chat_star clearfix">
                <img class="fl" src="__TMPL__public/assets/img/user_img.png" alt="">
                <div class="sc_bubble_wra fl">
                    <p class="sc_bubble_txt">
                        测试文字测试文字测试文字测试文字测试文字
                        <span class="sc_bubble_icon"></span>
                    </p>

                    <span class="sc_send_time">
                        6.18-3:20
                    </span>
                </div>
            </div>
            <div class="sc_chat_user fr">
                <img class="fr" src="__TMPL__public/assets/img/user_img.png" alt="">
                <div class="sc_bubble_wra fl">
                    <p class="sc_bubble_txt">
                        测试文字测试文字测试文字测试文字测试文字
                        <span class="sc_bubble_icon"></span>
                    </p>

                    <span class="sc_send_time fr">
                        6.18-3:20
                    </span>
                </div>
            </div>
        </div>
        <div class="new_comment clearfix">
            <div class="clearfix user_input_wrap">
                <textarea placeholder="" name="" id="" class="user_input" cols="30" rows="10"></textarea>
            </div>
            <span class="fr send_btn">回复</span>
            <span class="fr cancel_btn">取消</span>
        </div>

        <!--<div class="sc_send_wra fl">
            <img class="user_img" src="" alt="">
            <textarea name="" id="" class="user_input" cols="30" rows="10"></textarea>
        </div>-->
        <!--<span class="sc_submit fl">发送</span>-->
    </div>

    <!--<div class="fr">
        留言详情————————————————————————————————

    </div>
    <div class="an_right_wra fr">
        <h3>胡歌</h3>
        <div class="ml_content_wra">
            <div class="ml_user_info clearfix">
                <img class="fl user_img" src="__TMPL__public/assets/img/user_img.png" alt="">
                <div class="fl">
                    <span class="user_name">贝贝猫</span>
                    <span  class="user_leval_mark"></span>
                    <p class="ml_u_time">2小时前</p>
                </div>
                <span class="fl ml_icon">
                    留言
                </span>
            </div>
            <p class="ml_content_user">你还欠我们一个演唱会，要什么时候呢？</p>
        </div>

        <div class="sub_comment_list">
            <div class="sub_comment">
                <div class="info">
                    <span class="name">刘涛</span><span class="time">2小时前</span>
                </div>
                <p class="comment">子评论文字子评论文字子评论文字子评论文字子评论文字子评论文字子评论文字</p>
                <div class="sub_tool_group clearfix">
                    <span data-name="刘涛" class="reply_btn fl">回复</span>
                    <span class="detel_btn fr">删除</span>
                </div>
            </div>
        </div>

        <div class="ml_reply">
            <div class="clearfix ml_re_title">
                <span class="ml_star">刘涛回复贝贝猫</span>
                <span class="ml_time fr">2分钟前</span>
            </div>
            <p>测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</p>
        </div>
        <span class="ml_re_btn fl">回复</span>
        <textarea class="ml_re_input fl" placeholder="回复贝贝猫"></textarea>
        <span class="ml_submit fr">发送</span>
    </div>
    <div class="fr">
        评论回复详情—————————————————————————————
    </div>
    <div class="an_right_wra fr">
        <h3><a class="fl back" href="">评论回复列表</a> 唐嫣</h3>
        <div class="cm_content_wra">
            <div class="cm_user_info clearfix">
                <img class="fl user_img" src="__TMPL__public/assets/img/user_img.png" alt="">
                <div class="fl">
                    <span class="user_name">贝贝猫</span>
                    <span  class="user_leval_mark"></span>
                    <p class="cm_u_time">2小时前</p>
                </div>
                <span class="fl cm_icon">
                    留言
                </span>
            </div>
            <p class="cm_content_user">你还欠我们一个演唱会，要什么时候呢？</p>
            <div class="cms_content cleafix">
                <div class="cms_pic_wra fl">
                    <img src="__TMPL__public/assets/img/user_img.png" alt="">
                    <span>共1张</span>
                </div>
                <p class="cms_txt fl">
                    刘涛发布了图片
                </p>
            </div>
        </div>
        <div class="cm_reply">
            <div class="clearfix cm_re_title">
                <span class="cm_star">刘涛回复贝贝猫</span>
                <span class="cm_time fr">2分钟前</span>
            </div>
            <p>测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</p>
        </div>
        <span class="cm_re_btn fl">回复</span>
        <textarea class="cm_re_input fl" placeholder="回复贝贝猫"></textarea>
        <span class="cm_submit fr">发送</span>
    </div>-->



</div>


<include file="public@footer" />
<include file="public@starscripts" />
<script type="text/javascript" src="__TMPL__public/assets/js/message.js"></script>
<script>
    headerMove(6);
    var msgList_param = {
        url:'Messages/privateList',
        data:{
            star:100,
            page:1,
            status:0
        }
    };

    $.JsonRpc(msgList_param,function(data){
        data = data.data.list;
        var tpl = "";
        $.each(data,function(i){
            var secret_arg;
            if(localStorage.udid!=data[i].c_udid){
                secret_arg = {
                    cid: data[i].c_udid,
                    nickname: data[i].cnickname,
                    avatar: data[i].cavatar
                }
            }else {
                secret_arg = {
                    cid: data[i].c_parudid,
                    nickname: data[i].pnickname,
                    avatar: data[i].pavatar
                }
            }
//            (localStorage.udid!=data[i].c_udid)?(secret_content.cid = data[i].c_udid,secret_content.nickname=data[i].cnickname):secret_content.c_cid = data[i].c_parudid;
            (data[i].c_status==10)?read_flag="active":read_flag="";
            tpl +=
                '<li class="sc_list" data-name_send="'+secret_arg.nickname+'" data-c_cid="'+secret_arg.cid+'">'+
                '<a href="javascript:void(0)">'+
                '<div class="fl star_img_wra">'+
                '<img src="'+secret_arg.avatar+'" alt="">'+
                '<span class="'+read_flag+'"></span>'+
                '</div>'+
                '<div class="fl item_left">'+
                '<h4>'+secret_arg.nickname+'</h4>'+
                '<p>'+data[i].c_content+'</p>'+
                '</div>'+
                '<span class="fr sc_time">'+data[i].c_createtime.slice(0,16)+'</span>'+
                '</a>'+
                '</li>';
        });
        $(".sc_list_wra").html(tpl);
    });

    /*留言评论列表
    var msgList_param = {
        url:'Messages/infoContent',
        data:{
            type:40
        }
    };

    $.JsonRpc(msgList_param,function(data){
        data = data.data.list;
        var tpl = "";
        $.each(data,function(i){
            (data[i].c_status==10)?read_flag="active":read_flag="";
            tpl +=
                '<li class="sc_list" data-c_cid="'+data[i].c_cid+'">'+
                '<a href="javascript:void(0)">'+
                '<div class="fl star_img_wra">'+
                '<img src="'+data[i].u_avatar+'" alt="">'+
                '<span class="'+read_flag+'"></span>'+
                '</div>'+
                '<div class="fl item_left">'+
                '<h4>'+data[i].u_nickname+'</h4>'+
                '<p>'+data[i].c_content+'</p>'+
                '</div>'+
                '<span class="fr sc_time">'+data[i].c_createtime.slice(0,16)+'</span>'+
                '</a>'+
                '</li>';
        });
        $(".sc_list_wra").html(tpl);


    });*/


    $(".sc_list_wra").on("click",".sc_list",function(){
        $(".secret_detail").show();
        $(".secret_list").hide();
        var comment_input = $(".user_input");
        comment_input.on("focus",function(){
            $(this).stop().animate({"height":"100px"}, "fast");
        });
        comment_input.on("blur",function(){
            if($(this).val()==""){
                $(this).stop().animate({"height":"44px"}, "fast");
            }
        });
        $(".new_comment .cancel_btn").on("click",function(){
            $(this).parents(".new_comment").find(".user_input").val("").trigger("blur");
        });
        var c_cid = $(this).data("c_cid");
        var name_send = $(this).data("name_send");
        $(".name_send").html(name_send);
        $(".name_send").attr("data-c_cid",c_cid);
        var private_param = {
            url:'Messages/privateContent',
            data:{
                suid:c_cid,
                star:localStorage.u_type,
                page:1
            }
        };
        $.JsonRpc(private_param,function(data){
            data = data.data.list;
            var tpl = "";
            $.each(data,function(i){
                if(localStorage.udid!=data[i].c_udid){
                    tpl +=
                        '<div class="clearfix">' +
                        '<div class="sc_chat_star clearfix">'+
                            '<img class="fl" src="'+data[i].cavatar+'" alt="">'+
                                '<div class="sc_bubble_wra fl">'+
                                    '<p class="sc_bubble_txt">'+data[i].c_content+
                                        '<span class="sc_bubble_icon"></span>'+
                                    '</p><br />'+
                                    '<span class="sc_send_time">'+data[i].c_createtime.slice(0,16)+'</span>'+
                                '</div>'+
                        '</div>'+
                        '</div>' +
                        '</div>';
                }else {
                    tpl +=
                        '<div class="clearfix">' +
                        '<div class="sc_chat_user fr">'+
                        '<img class="fr" src="'+data[i].cavatar+'" alt="">'+
                            '<div class="sc_bubble_wra fl">'+
                                '<p class="sc_bubble_txt">'+data[i].c_content+
                                    '<span class="sc_bubble_icon"></span>'+
                                '</p><br />'+
                                '<span class="sc_send_time fr">'+data[i].c_createtime.slice(0,16)+'</span>'+
                            '</div>'+
                        '</div>'+
                        '</div>';
                }
            });
            $(".sc_chat_wra").html(tpl);

            $(".secret_detail").on("click",'.send_btn',function(){
                var cid = $(".name_send").data("c_cid");
                var comList_param = {
                    url:'Circles/comSend',
                    data:{
                        cid: localStorage.udid,
                        description: $(".user_input").val(),
                        parent: cid,
                        pudid: cid,
                        type: 40
                    }
                };
                $.JsonRpc(comList_param,function(data){
                    if(data.code==200){
                        var tpl =
                                '<div class="clearfix">' +
                                '<div class="sc_chat_user fr">'+
                                '<img class="fr" src="'+localStorage.u_avatar+'" alt="">'+
                                '<div class="sc_bubble_wra fl">'+
                                '<p class="sc_bubble_txt">'+data.content.description+
                                '<span class="sc_bubble_icon"></span>'+
                                '</p><br />'+
                                '<span class="sc_send_time fr">'+ new Date(parseInt(data.time) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ')+'</span>'+
                                '</div>'+
                                '</div>'+
                                '</div>';
                        $(tpl).appendTo(".sc_chat_wra");
                        $(".user_input").val("");
                    }
                });
            });

        });
    });

    $(".center").on("click",".back_btn",function(){
        location.reload();
    });

</script>
</body>
</html>

















